<template>
    <div class="loginbox">
      <Title />
      <div class="formbox shadow">
        <el-tabs v-model="activeTab" @tab-click="tabsClick">
          <el-tab-pane label="用户登录" name="account">
            <el-form ref="passwordForm" label-position="top" :rules="passwordRules" label-width="80px" :model="form" size="mini">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" type="password"></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="code">
                <div class="flex between">
                  <el-input v-model="form.code" style="margin-right: 10px;"></el-input>
                  <img :src="captcha" @click="getCapcha()" style="width: 180px; height:45px;cursor: pointer;" alt="">
                </div>
              </el-form-item>
              <!-- <el-form-item> 
                <el-switch v-model="form.remeber"></el-switch>
                <span style="margin-left: 10px;">记住我</span>
              </el-form-item> -->
              <el-form-item>
                <el-button class="login-btn" type="primary" @click="onSubmit">登录</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="短信登录" name="sms">
            <el-form ref="codeForm" label-position="top" :rules="passwordRules" label-width="80px" :model="form" size="mini">
              <el-form-item label="手机号" prop="username">
                <el-input v-model="codeForm.username"></el-input>
              </el-form-item>
              <!-- <el-form-item label="验证码" prop="password">
                <el-input v-model="codeForm.password" type="password"></el-input>
              </el-form-item> -->
              <el-form-item label="验证码" prop="code">
                <div class="flex between">
                  <el-input v-model="codeForm.code" style="margin-right: 10px;"></el-input>
                  <img :src="captcha" @click="getCapcha()" style="width: 180px; height:45px;cursor: pointer;" alt="">
                </div>
              </el-form-item>
              <el-form-item>
                <el-button class="login-btn" type="primary" @click="onSubmit">登录</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="邮箱登录" name="email">
            <el-form ref="emailForm"  label-position="top" :rules="passwordRules" label-width="80px" :model="form" size="mini">
              <el-form-item label="邮箱" prop="username">
                <el-input v-model="emailForm.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="emailForm.password" type="password"></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="code">
                <div class="flex between">
                  <el-input v-model="emailForm.code" style="margin-right: 10px;"></el-input>
                  <img :src="captcha" @click="getCapcha()" style="width: 180px; height:45px;cursor: pointer;" alt="">
                </div>
              </el-form-item>
              <el-form-item>
                <el-button class="login-btn" type="primary" @click="onSubmit">登录</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="微信登录" name="wechat">
            微信登录
          </el-tab-pane>
        </el-tabs>
        <!-- 账号登录 -->
        
        <!-- 短信登录 -->
        
        <div class="find" style="text-align: right;margin-bottom: 15px;">
          <router-link to="/retrieve">找回密码</router-link>
        </div>
      </div>
    </div>
  </template>
  
  <script>

  import Title from '@/components/Title'
  import Api from '@/api'
  import { getRandom } from '@/utils'
  import { setToken, setUser } from '@/utils/auth'

  export default {
    components: {
      Title
    },
    data() {
      return {
        activeTab: 'account',
        captcha: null, // 随机数验证码
        form: {
          grant_type: 'password',
          username: 'admin',
          password: '123456',
          key: null
        },
        codeForm: {

        },
        emailForm: {

        },
        passwordRules:{
          username: { required: true, message: '请输入账号', trigger: 'blur' },
          password: { required: true, message: '请输入账号', trigger: 'blur' },
          code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 4, max: 4, message: '验证码长度不正确', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.getCapcha()
    }, 
    methods: {
      tabsClick() {

      },
      async getCapcha() {
        this.form.key = getRandom(16)
        const stream = await Api.captcha(this.form.key)
        try {
          this.captcha = window.URL.createObjectURL(stream)
        } catch(e) {
          this.captcha = window.URL.createObjectURL(new Blob([stream]))
        }
        
      },
      onSubmit() {
        this.$refs.passwordForm.validate( async (valid) => {
          if (!valid) {
            return false 
          }
          let res = await Api.token(this.form)
          setToken(res.token_type + ' ' + res.access_token)
          // 获取用户信息
          res = await Api.findUserInfo()
          console.log('当前用户信息', res.data)
          this.$store.dispatch('setUser', res.data)
          setUser(res.data)
          this.$router.push('/')
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>

  .loginbox {
    padding-top: 20px;
    .formbox {
      width: 40%;
      margin: 20px auto;
      padding: 20px 10px;
      /deep/ .el-form-item__label {
          padding: 0 !important;
          color: #000;
          font-weight: 600;
      }
      /deep/ .el-input--mini .el-input__inner {
        height: 45px !important;
      }
      .login-btn {
        display: block !important;
        width: 100% !important;
      }
    }
  }
  </style>